<template>
  <div class="container">
    <div class="topMin">
      <ul>
        <li v-for="(item,index) in TopList" :key="index">
          <div class="liDiv">
            <p>{{ item.workShopName + '异常总数' }}</p>
          </div>
          <div class="conters">
            <p>待签到：{{ item.signValue }}</p>
            <p>处理中：{{ item.handleValue }}</p>
            <p>已解除：{{ item.relieveValue }}</p>
          </div>
        </li>
      </ul>
    </div>


    <div class="report-main">
      <div class="report -table">
        <div class="table-header">
          <div class="table-line header-line">
            <div class="line-cell cell1">Andon类型</div>
            <div class="line-cell cell2">Andon明细</div>
            <div class="line-cell cell3">异常编号</div>
            <div class="line-cell cell4">设备编号</div>
            <div class="line-cell cell5">车间</div>
            <div class="line-cell cell6">触发人员</div>
            <div class="line-cell cell7">触发时间</div>
            <div class="line-cell cell7">持续时间</div>
            <div class="line-cell cell7">异常状态</div>
          </div>
        </div>
        <div ref="tableContent" class="table-content">
          <template v-for="(item, index) in tableData">
            <div :key="index" class="table-line content-line">
              <div class="line-cell cell1">{{ item.andonTypeName }}</div>
              <div class="line-cell cell2">{{ item.andonDetail }}</div>
              <div class="line-cell cell3">{{ item.exceptionCode }}</div>
              <div class="line-cell cell4">{{ item.device }}</div>
              <div class="line-cell cell5">{{ item.workshopName }}</div>
              <div class="line-cell cell6">{{ item.triggerUserName }}</div>
              <div class="line-cell cell7">{{ item.triggerTime }}</div>
              <div class="line-cell cell8">{{ item.continueTime }}</div>
              <div class="line-cell cell9">{{ item.state === '0' ? '待签到' : item.state === '1' ? '处理中' : '' }}</div>

            </div>
          </template>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
// import { andonReportQueryWarning } from '@/api/service-module/andon/KanBan'
import {connectWebsocket, sendMessage} from "@/api/websocket";

export default {
  name: 'EarlyWarningKanBan',
  data() {
    return {
      TopList: [{
        workShopName: '',
        signValue: '',
        handleValue: '',
        relieveValue: ''
      }, {
        workShopName: '',
        signValue: '',
        handleValue: '',
        relieveValue: ''
      }, {
        workShopName: '',
        signValue: '',
        handleValue: '',
        relieveValue: ''
      }, {
        workShopName: '',
        signValue: '',
        handleValue: '',
        relieveValue: ''
      }, {
        workShopName: '',
        signValue: '',
        handleValue: '',
        relieveValue: ''
      }],
      tableData: [],
      page: 1,
      limin: 15,
      pages: 0
    }
  },
  created() {
    // this.isEachList()
    this.initWebData()
    this.reloadWeb()
  },
  mounted() {
    // this.timer = setInterval(this.isEachList, 1000 * 15)
    this.rollText()
  },
  beforeDestroy() {
    // clearInterval(this.timer)
  },
  methods: {
    initWebData() {
      connectWebsocket(
        // 测试地址
        process.env.VUE_APP_WS_URL+'/QueryAnDonWarning/warning',
        // 传递给后台的数据
        {},
        // 成功拿到后台返回的数据的回调函数
        (data) => {
          // this.tmp = JSON.parse(data)
          // console.log(JSON.parse(data))
          this.TopList = JSON.parse(data).andonWarningVos
          this.tableData = JSON.parse(data).andonExceptions.records
          this.pages = JSON.parse(data).andonExceptions.pages
        },
        () => {
          sendMessage("im tird!")
        }
      )
    },
    reloadWeb(){
      //每隔8小时刷新一下页面，防止卡死
      setTimeout(location.reload,1000*60*60*8)
    },
    isEachList() {
      andonReportQueryWarning({ 'page': { 'current': this.page, 'size': this.limin }}).then(res => {
        if (res.code === '200') {
          this.TopList = res.data.andonWarningVos
          this.tableData = res.data.andonExceptions.records
          this.pages = res.data.andonExceptions.pages
        }
      })
    },
    rollText() {
      let speed = 280
      let that = this
      let tmpHi = 0
      function Marquee() {
        if (that.$refs.tableContent) {
          // console.log(tmpHi)
          // console.log(that.$refs.tableContent.scrollTop)
          tmpHi = that.$refs.tableContent.scrollTop++
          if (tmpHi === that.$refs.tableContent.scrollTop) {
            that.$refs.tableContent.scrollTop = 0
          }
          // console.log(that.$refs['tableContent'].offsetHeight)
          // if (that.$refs.tableContent.scrollTop >= (that.$refs['tableContent'].offsetHeight / 3)) {
          // if (that.$refs.tableContent.scrollTop >= tmpHi) {
          //   that.$refs.tableContent.scrollTop = 0
          // }else {
          //   tmpHi = that.$refs.tableContent.scrollTop
          //   that.$refs.tableContent.scrollTop = that.$refs.tableContent.scrollTop + 1}
        }
      }
      setInterval(Marquee, speed)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 小分辨率设备 (平板、电视机或者安卓设备, 960px and down) */
@media only screen and (max-width: 960px) {
  .container {
    background-image: url("../../../public/billboard.jpg");
    background-size: 100vh 100vw;
    font-size: 12px;

    .topMin ul {

      ul {
      }

      li {
        display: block;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 9px;
        width: 8rem;
        text-align: center;
        float: left;
        color: #FFFFFF;
        margin: 0.5rem;
        p {
          margin: 0;
        }
      }
    }

    .report-main {
      clear: both;
      color: #FFFFFF;
      border-radius: 9px;
      overflow: hidden;

      .table-header div {
        display: block;
        float: left;
        margin-left: 1.5rem;
        padding-right: 1.8rem;
      }

      .table-content {
        clear: both;
        //position: absolute;
        //margin-top: 50px;
        height: calc(100% - 50px);
        width: 90%;
        margin-left: 2rem;
        margin-top: 1rem;
        padding-bottom: 30rem;
        color: #ffffff;
        overflow: hidden;
        font-size: 0.6rem;
        position: absolute;
        .table-line:nth-of-type(odd) {
          background: rgba(122, 178, 203, 0.22);
        }

        .table-line:nth-of-type(even) {
          background: rgba(153, 203, 122, 0.22);
        }

        .table-line {
          margin-top: 0.2rem;
          position: relative;
          width: 99%;
          display: flex;
          border: 1px solid rgb(255, 255, 255);
          border-radius: 5px;
          margin-left: 0.5rem;

          .line-cell {
            min-width: 100px;
            word-wrap: break-word;
          }

          .cell1 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
          }

          .cell2 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 1rem;
          }

          .cell3 {
            min-width: 40px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 0.1rem;
          }

          .cell4 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 4.5rem;
          }

          .cell5 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: -0.5rem;
          }

          .cell6 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
          }

          .cell7 {
            min-width: 70px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: -1rem;
          }

          .cell8 {
            min-width: 60px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 3rem;
          }

          .cell9 {
            min-width: 120px;
            width: 9/110 * 100%;
            margin-left: 1.5rem;
          }
        }
      }
    }
  }
}

/* 大分辨率设备 (工作站或者台式机, 961px and up) */
@media only screen and (min-width: 961px) {
  .container {
    background-image: url("../../../public/billboard.jpg");
    height: 100vh;
    margin-top: -1rem;
    font-size: 12px;

    .topMin ul {

      ul {
      }

      li {
        display: block;
        width: 17rem;
        border: 1px solid rgba(255, 255, 255, 0.45);
        border-radius: 9px;
        padding: 1rem;
        margin: 1rem;
        float: left;
        color: #FFFFFF;
        font-size: 1rem;
        text-align: center;
      }
    }

    .report-main {
      clear: both;
      color: #FFFFFF;
      border-radius: 9px;
      height: 74vh;
      overflow: hidden;
      margin: 3rem;

      .table-header div {
        display: block;
        float: left;
        margin: 0.5rem;
        padding-right: 7rem;
      }

      .table-content {
        clear: both;
        //position: absolute;
        //margin-top: 50px;
        height: 100vh;
        color: #ffffff;
        overflow: hidden;

        .table-line:nth-of-type(odd) {
          background: rgba(122, 178, 203, 0.22);
        }

        .table-line:nth-of-type(even) {
          background: rgba(153, 203, 122, 0.22);
        }

        .table-line {
          margin-top: 0.3rem;
          position: relative;
          width: 100%;
          display: flex;
          border: 3px solid rgb(255, 255, 255);
          border-radius: 5px;

          .line-cell {
            min-width: 100px;
            word-wrap: break-word;
          }

          .cell1 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            padding: 0.5rem;
          }

          .cell2 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 3rem;
          }

          .cell3 {
            min-width: 40px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 2rem;
          }

          .cell4 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 2.5rem;
          }

          .cell5 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 1.5rem;
          }

          .cell6 {
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
          }

          .cell7 {
            min-width: 60px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
          }

          .cell8 {
            min-width: 60px;
            width: 9/110 * 100%;
            display: flex;
            align-items: center;
            text-align: center;
            margin-left: 5rem;
          }

          .cell9 {
            min-width: 120px;
            width: 9/110 * 100%;
          }
        }
      }
    }
  }
}

</style>
